---
title: Tailwind CSS Button Group - Components Library @David UI
description: Group related actions with Tailwind CSS button group components. Stylish and responsive layouts for toolbars, menus, and segmented controls.
github: button-group
prev: docs/html/button
next: docs/html/checkbox
---

# Tailwind CSS Button Group

David UI’s button group component organizes related actions efficiently. Built with Tailwind CSS, it supports various layouts, sizes, and styles, making it perfect for toolbars or segmented controls. 

Check out our Tailwind CSS & HTML component examples to implement functional and stylish button groups. Copy-paste them directly to your projects.

---

## Basic Button Group

Explore this responsive button group example, offering fine-tuned control over layout and styling. Utility classes make it simple to customize every aspect of the button group’s design.


<PreviewWithCode relativePath="button-group/button-group-demo.tsx" language="html" />

---

## Button Group Variants

Discover a collection of button groups with diverse styling options, displayed in a vertical stack to showcase multiple design approaches.

<PreviewWithCode relativePath="button-group/button-group-variants.tsx" language="html" />

---

## Button Group Sizes

Create scalable and responsive UI components by adjusting the size of your button groups. This example demonstrates various dimensions to suit different design needs.

<PreviewWithCode relativePath="button-group/button-group-sizes.tsx" language="html" />

---

## Button Group Colors

Experiment with six unique button group color schemes, each designed to represent specific actions or states within your application or website.

<PreviewWithCode relativePath="button-group/button-group-colors.tsx" language="html" />

---

## Button Group With Icon

Improve button groups with icons to add visual context. This example features Iconoir icons, but you can integrate any icon set of your choice.

<PreviewWithCode relativePath="button-group/button-group-with-icon.tsx" language="html" />

---

## Block Level Button Group

See how to design a block-level button group, displayed in a single row. Optimized for full-width layouts, it includes horizontal scrolling on smaller screens and full visibility on larger ones.

<PreviewWithCode relativePath="button-group/block-level-button-group.tsx" language="html" />

---

## Pill Button Group

Learn how to create pill-shaped button groups using styles like ghost, outline, solid, and gradient. The `rounded-full` class adds the pill effect for a sleek design.

<PreviewWithCode relativePath="button-group/pill-button-group.tsx" language="html" />

---

## Custom Button Group

Leverage Tailwind CSS classes to design bespoke button groups for various purposes. This example shows how to create a button group tailored for social media integrations.

<PreviewWithCode relativePath="button-group/custom-button-group.tsx" language="html" />

---

## Required Script

The button groups component needs a required script file for ripple effect to work, you just need to add the below script file to the bottom of your html file.

If you don't want to have the ripple effect for the button groups you can skip this step.


<CodePreviewTailwindClasses />
